<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>加密测试</title>
    <script th:src="@{/js/lib/inspinia/js/jquery-2.1.1.js}"></script>
</head>
<body>
  <table>
      <tr>
          <td>
              密匙：
          </td>
          <td>
              <input type="text" id="key" name="key"   style="width: 300px"/>
          </td>
      </tr>
      <tr>
          <td>
             需加密/解密值：
          </td>
          <td colspan="2">
             <input type="text" id="value" name="value"  style="width: 300px" />
          </td>
      </tr>
      <tr>
          <td>
              <button type="button" id="encrypt" name="encrypt"   onclick="encrypt('encrypt');">&nbsp;加密</button>
           </td>
          <td>
              <button type="button" id="decrypt" name="decrypt"  onclick="encrypt('decrypt');">&nbsp;解密</button>
          </td>
      </tr>
      <tr>
          <td>
              加密/解密结果：
          </td>
          <td colspan="2">
             <input type="text" id="result" name="result"   style="width: 300px"/>
          </td>
      </tr>

  </table>
</body>
<script>
    function encrypt(ty)
    {
        //创建传递的参数
        var postdata = {
            action:ty,
            key: $("#key").val(),
            value: $("#value").val(),
        };

        //发送异步请求到后台保存用户数据
        $.ajax({
            url:"/demo/encryptAction",
            type:"post",
            data:JSON.stringify(postdata),
            contentType:"application/json",
            dataType:"json",
            success:function(data){
                $("#result").val(data.data);
            }
        });
    }
</script>
</html>